const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
const webpack = require('webpack'); //访问内置的插件
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    entry:"./src/index.js",
    output:{
        filename:"main.js",
        path:path.join(__dirname,"./dist")
    },
    plugins: [
        // new webpack.optimize.UglifyJsPlugin(),
        new HtmlWebpackPlugin({template: './src/index.html'}),
        new MiniCssExtractPlugin()
      ],
      mode:'development',
      module: {
        rules: [
          {
            test: /\.(png|jpg|gif|eot|svg|ttf|woff|woff2)$/,
            use: [
              {
                loader: 'url-loader',
                options: {}
              }
            ]
          },
          {
            test: /\.(css|scss|sass|less)$/,
            use: [
              // 将 JS 字符串生成为 style 节点
            //   'style-loader',
            MiniCssExtractPlugin.loader,
              // 将 CSS 转化成 CommonJS 模块
              'css-loader',
              // 将 Sass 编译成 CSS
              'sass-loader',
            ],
          },
        ]
      },
    devServer:{
        host:"localhost",
        open:true,
        hot:true,
        port:8090
    }
}